import React from 'react';
// import { routerRedux } from 'react-router-dom';

import styles from './index.module.less';

/*
* @author JinHang
* @description 登录框组件
* @date 2018/10/22 15:56
* @param {}
* @return {}
* */
class Member extends React.Component {
  state = {
    notice: {
      messages: [
        { key: 1, text: '丰收部落正式上线运营！欢迎广大用户注册使用，有你更精彩！' },
        { key: 2, text: '丰收部落正式上线运营！欢迎广大用户注册使用，有你更精彩！' },
        { key: 3, text: '丰收部落正式上线运营！欢迎广大用户注册使用，有你更精彩！' },
        { key: 4, text: '丰收部落正式上线运营！欢迎广大用户注册使用，有你更精彩！' },
      ],
      rules: [
        { key: 1, text: '关于丰收部落会员实名认证要求的通你好你好你好' },
        { key: 2, text: '关于丰收部落会员实名认证要求的通你好你好你好' },
        { key: 3, text: '关于丰收部落会员实名认证要求的通你好你好你好' },
        { key: 4, text: '关于丰收部落会员实名认证要求的通你好你好你好' },
      ],
    },
    selectedTab: 'messages',
  };

  onNoticeTabItemMouseEnter = type => {
    this.setState({
      selectedTab: type,
    });
  };

  goToLogin = () => {
    const { dispatch } = this.props;

    // dispatch(routerRedux.push('/login'));
  };

  render() {
    const { notice, selectedTab } = this.state;

    return (
      <div className={styles.memberBox}>
        <div className={styles.infoBox}>
          <div className={styles.greetingBox}>
            <div className={styles.avatar}>
              <img src='http://pic.58pic.com/58pic/15/18/22/16b58PICrgE_1024.jpg' alt='头像' />
            </div>
            <div className={styles.text}>
              Hi,晚上好
            </div>
          </div>
          <div className={styles.loginBtnGroup}>
            <div className={styles.btnBox}>
              <button className={styles.btn + ' ' + styles.loginBtn} onClick={this.goToLogin}>
                登录
              </button>
              <button className={styles.btn + ' ' + styles.registerBtn}>注册</button>
            </div>
          </div>
        </div>
        <div className={styles.serviceBox}>
          <div className={styles.serviceItem}>
            <div className={styles.serviceIcon}>
              <i className='iconfont icon-fasongjiadan'></i>
            </div>
            <div className={styles.text}>
              发询价单
            </div>
          </div>
          <div className={styles.serviceItem}>
            <div className={styles.serviceIcon}>
              <i className='iconfont icon-xunjiadanguanli'></i>
            </div>
            <div className={styles.text}>
              询价单管理
            </div>
          </div>
          <div className={styles.serviceItem + ' ' + styles.lastItem}>
            <div className={styles.serviceIcon}>
              <i className='iconfont icon-buy'></i>
            </div>
            <div className={styles.text}>
              订单管理
            </div>
          </div>
          <div className={styles.serviceItem + ' ' + styles.sendRowItem}>
            <div className={styles.serviceIcon}>
              <i className='iconfont icon-dianpuguanli'></i>
            </div>
            <div className={styles.text}>
              店铺管理
            </div>
          </div>
          <div className={styles.serviceItem + ' ' + styles.sendRowItem}>
            <div className={styles.serviceIcon}>
              <i className='iconfont icon-shangpinguanli'></i>
            </div>
            <div className={styles.text}>
              商品管理
            </div>
          </div>
          <div className={styles.serviceItem + ' ' + styles.sendRowItem + ' ' + styles.lastItem}>
            <div className={styles.serviceIcon}>
              <i className='iconfont icon-sale'></i>
            </div>
            <div className={styles.text}>
              订单管理
            </div>
          </div>
        </div>
        <div className={styles.noticeBox}>
          <div className={styles.titleTab}>
            <div className={styles.tabItem + (selectedTab === 'messages' ? ' ' + styles.active : '')} onMouseEnter={this.onNoticeTabItemMouseEnter.bind(this, 'messages')}>公告中心</div>
            <div className={styles.line}></div>
            <div className={styles.tabItem + (selectedTab === 'rules' ? ' ' + styles.active : '')} onMouseEnter={this.onNoticeTabItemMouseEnter.bind(this, 'rules')}>规则中心</div>
          </div>
          <div className={styles.tabContent}>
            {
              notice[selectedTab].map((item, index) => {
                return (
                  <div key={item.key} className={styles.noticeItem}>
                    {item.text}
                  </div>
                );
              })
            }
          </div>
        </div>
        <div className={styles.seeMore}>
          查看更多>>
        </div>
      </div>
    );
  }
}

export default Member;
